import styled from "styled-components";

export const BannerWrapper = styled.div`
  background: url(${(props) => props.bgImage}) center center/6000px;
  .banner {
    height: 270px;
    display: flex;
    position: relative;
    .banner-left-btn {
      position: absolute;
      left: -68px;
      top: 50%;
      transform: translateY(-50%);
      width: 37px;
      height: 63px;
      background-position: 0 -360px;
      :hover {
        background-position: 0 -430px;
        cursor: pointer;
      }
    }
    .banner-right-btn {
      position: absolute;
      right: -68px;
      top: 50%;
      transform: translateY(-50%);
      width: 37px;
      height: 63px;
      background-position: 0 -508px;
      :hover {
        background-position: 0 -578px;
        cursor: pointer;
      }
    }
  }
`;

export const BannerLeft = styled.div`
  display: inline-block;
  width: 730px;

  .banner-item {
    overflow: hidden;
    height: 270px;
    .image {
      width: 100%;
    }
  }
  .ant-carousel .slick-dots li button {
    width: 20px;
    height: 20px;
    background-image: url(${require("@/assets/img/radio_slide.png").default});
    background-position: 0px -240px;
    background-color: transparent;
  }
  .ant-carousel .slick-dots li.slick-active button {
    background-image: url(${require("@/assets/img/radio_slide.png").default});
    background-position: -30px -240px;
  }
  .ant-carousel .slick-dots li.slick-active {
    width: 16px;
  }
  .ant-carousel .slick-dots-bottom {
    bottom: 22px;
  }
`;
export const BannerRight = styled.div`
  width: 254px;
  height: 270px;
  background: url(${require("@/assets/img/download.png").default});
  display: inline-block;
`;

export const BannerControl = styled.div``;
